<template>
  <div class="login-box">
    <div class="login-container">
      <a-card style="width: 400px;height:420px;border-radius:15px;" hoverable>
        <h2>欢迎登陆</h2>
        <p>「丹秋」统一资源管理平台V2.0</p>
        <a-form
          id="components-form-demo-normal-login"
          :form="form"
          class="login-form"
          @submit="handleSubmit"
        >
          <a-form-item>
            <a-input
              v-decorator="[
                'username',
                {
                  rules: [{ required: true, message: '用户名不能为空！' }],
                },
              ]"
              placeholder="用户名"
            >
              <a-icon
                slot="prefix"
                type="user"
                style="color: rgba(0, 0, 0, 0.25)"
              />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input
              v-decorator="[
                'password',
                {
                  rules: [{ required: true, message: '密码不能为空！' }],
                },
              ]"
              type="password"
              placeholder="密码"
            >
              <a-icon
                slot="prefix"
                type="lock"
                style="color: rgba(0, 0, 0, 0.25)"
              />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-checkbox
              @change="onChange"
              :checked="checkFlag"
            >
              记住密码
            </a-checkbox>
            <a-button type="primary" html-type="submit" class="login-form-button"
              >登陆</a-button
            >
          </a-form-item>
        </a-form>
      </a-card>
    </div>
  </div>
</template>

<script>
export default {
  layout: "blank",
  head: {
    title: "登录",
  },
  data(){
    return {
      checkFlag:true
    }
  },
  watch:{
    checkFlag(val){
      if (!val) {
        if (localStorage.getItem('userinfo')) {
          localStorage.removeItem('userinfo')
        }
      }
    }
  },
  created(){
    const that = this
    document.onkeydown = function() {
      // 回车事件
      const key = window.event.keyCode
      if (key === 13) {
        that.handleSubmit()
      }
    }
  },
  mounted(){
    this.reSetLoginForm(); // 只能在mounted中调用，要不然拿不到this.form
  },
  methods: {
    // 登陆
     handleSubmit(e) {
      e.preventDefault(); // 阻止表单默认提交事件
      this.form.validateFields((err, values) => {
        if (!err) {
          this.remenberAcountPassword() // 调用记住密码方法
          console.log("Received values of form: ", values);
          this.$axios.post('/rc/api/auth/login',{
            username:values.username,
            password:values.password
          }).then(res => {
            if(res.success){
              localStorage.setItem('token',res.data.token) //本地存储token值
              localStorage.setItem('name',res.data.user.account) // 存储用户名
              this.$message.success('登录成功')
              this.$router.push('/device')
            }
          })
        }
      });
    },
    // 记住账号密码（存在本地存储里面）
    remenberAcountPassword() {
      if (this.checkFlag) {
        localStorage.setItem('userinfo', JSON.stringify(this.form.getFieldsValue()))
      }
    },
    // 进入页面设置账号密码（账号密码回显）
    reSetLoginForm() {
      const loginForm = JSON.parse(localStorage.getItem('userinfo'))
      if (loginForm) {
        this.checkFlag = true
        this.form.setFieldsValue({
          "username":loginForm.username,
          "password":loginForm.password
        })
      }
    },
    // 更改选中是否记住密码
    onChange(e){
      this.checkFlag = e.target.checked
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "normal_login" });
  },
};
</script>
<style lang="scss" scoped>
.login-box{
  width: 100%;
  height: 100%;
  background: url("../assets/bg.png") no-repeat;
  background-attachment: fixed;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
}
.login-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
</style>